<template>
	<!-- 我的-设置-个人资料 -->
	<view class="personalData public">
		<view class="empty"></view>
		<view class="main">
			<view class="main-item flexjcsb">
				<view class="main-item-left">
					头像
				</view>
				<view class="main-item-right">
					<view class="userImage">
						<uni-section>
							<view class="example-body custom-image-box">
								<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" file-mediatype="image" @select="select">
									<image style="width: 100%;height: 100%;" :src="$image + arr.headimg" mode=""></image>
								</uni-file-picker>
							</view>
						</uni-section>
					</view>
					<view class="main-item-right-forward">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>
			<view class="main-item flexjcsb">
				<view class="main-item-left">
					昵称
				</view>
				<view class="main-item-right" @click="show = true">
					<view class="fillIn">
						<!-- 等等 -->
						{{arr.nickname}}
					</view>
					<view class="main-item-right-forward">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>
			<view class="main-item flexjcsb">
				<view class="main-item-left">
					性别
				</view>
				<view class="main-item-right">
					<view class="fillIn">
						<!-- 去填写 -->
						<picker @change="bindPickerChange" :range="array">
							<!-- <view class="" v-if="num == 0">
								去填写
							</view> -->
							<!-- <view class="uni-input">{{array[num]}}</view> -->
							<view class="uni-input">{{arr.sex == 0 ? '保密' : arr.sex == 1 ? '男' : '女'}}</view>
						</picker>
					</view>
					<view class="main-item-right-forward">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>
			<view class="main-item flexjcsb">
				<view class="main-item-left">
					生日
				</view>
				<view class="main-item-right">
					<view class="fillIn">
						<!-- 去填写 -->
						<!-- :start="startDate" :end="endDate" -->
						<picker mode="date" @change="bindDateChange">
							<view class="uni-input">{{arr.birthday | timesTamp}}</view>
						</picker>
					</view>
					<view class="main-item-right-forward">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>
			<view class="main-item flexjcsb">
				<view class="main-item-left">
					手机号
				</view>
				<view class="main-item-right" @click="bindPhoneChange">
					<view class="fillIn">
						<!-- 187****9876 -->
						<!-- {{arr.mobile}} -->
						{{phone}}
					</view>
					<view class="main-item-right-forward">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="30" length="40%">
			<!-- <view>出淤泥而不染，濯清涟而不妖</view> -->
			<view class="popup">
				<view class="popup-item">
					<input type="text" class="input-phone" placeholder="请输入您的昵称" maxlength="7" v-model="nickname">
				</view>
				<view class="popup-item">
					<button class="popup-item-button" @click="confirmEdit">确认修改</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 修噶记手机号，需要发送验证码，没写完 -->
		<u-popup v-model="showPhone" mode="bottom" border-radius="30" length="45%">
			<view class="popup">
				<view class="popup-item flexjcsb">
					<input type="number" class="input-phone" placeholder="请输入手机号" maxlength="11" v-model="updatePhone" @blur="getphone">
				    <uni-icons :type="regular.phone"></uni-icons>
				</view>
				<view class="popup-item flexjcsb">
					<input type="number" class="input-code" placeholder="请输入验证码" v-model="code">
				    <!-- <uni-icons :type="regular.phone"></uni-icons> -->
					<!-- <text>获取验证码</text> -->
					<button class="obtainCodes" @click="eventObtainCode" :disabled="isObtainCode">{{isObtainCode ? '重新获取' + obtainCodes + 's' : '获取验证码'}}</button>
				</view>
				<view class="popup-item">
					<button class="popup-item-button" @click="confirmEditPhone">确认修改</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const $api = require('@/utils/request.js').API
	export default {
		data() {
			return {
				imageStyles: {
					width: '90rpx',
					height: '90rpx',
					border: {
						radius: '50%'
					}
				},
				num: 0,
				array: ['保密', '男', '女'],
				date: '',
				show: false,
				nickname: '',
				arr: [],
				birthday: '',
				phone: '',
				code: '',
				regular: {
					phone: '',
				},
				showPhone:false,
				updatePhone:'',
				$image: this.$image,
				
				obtainCodes: 60,
				isObtainCode: false,
			}
		},
		onLoad() {
			this.getInfo();
		},
		filters: {
			timesTamp(timestamp) {
				const date = new Date(timestamp * 1000)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const formattedTime = `${year}-${month}-${day}`
				return formattedTime
			}
		},
		methods: {
			// 
			getInfo(){
				$api.postUserInformation({
					// token: uni.getStorageSync('token')
				}).then(res => {
					this.arr = res.data.data
					let dateTime = res.data.data.birthday
					let date = new Date(dateTime)
					let year = date.getFullYear()
					let month = date.getMonth() + 1
					let day = date.getDate()
					this.birthday = `${year}-${month}-${day}`
				
					let phones = this.arr.mobile
					this.phone = phones.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
				})
			},
			confirmEdit() {
				$api.postNickname({
					nickname: this.nickname,
				}).then(res => {
					this.show = false
					this.getInfo();
					uni.showToast({
						title:'修改成功',
						icon:'',
						duration:2000
					})
				})
			},
			bindPhoneChange(){
				// this.showPhone = true;
				uni.showToast({
					title:'暂无此功能',
					icon:'none',
					duration:2000
				})
			},
			// 修改手机号码
			confirmEditPhone(){
				
			},
			// postMerchantCode
			onchange(e) {
				const value = e.detail.value
			},
			// 性别
			bindPickerChange(e) {
				this.num = e.detail.value
				$api.postSex({
					// token: uni.getStorageSync('token'),
					// nickname: this.array[this.num],
					// sex: this.array[this.num],
					sex: this.num
				}).then(res=>{
					this.getInfo();
					uni.showToast({
						title:'修改成功',
						icon:'',
						duration:2000
					})
				})
			},
			// 生日
			bindDateChange(e) {
				this.date = e.detail.value
				let dateObj = new Date(this.date)
				let timesTamp = dateObj.getTime() / 1000
				$api.postBirthday({
					// token: uni.getStorageSync('token'),
					birthday: timesTamp
				}).then(res=>{
					this.getInfo();
					uni.showToast({
						title:'修改成功',
						icon:'',
						duration:2000
					})
				})
			},
			// 获取头像
			select(e) {
				uni.uploadFile({
					url: 'https://songcan.xyct1688.com/api/upload/commonimg',
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						"user": "test",
					},
					success: (uploadFileRes) => {
						let image = JSON.parse(uploadFileRes.data)
						$api.postModifyheadimg({
							token: uni.getStorageSync('token'),
							headimg: image.data.pic_path
						})
						.then(res=>{
							this.getInfo();
							uni.showToast({
								title:'修改成功',
								icon:'',
								duration:2000
							})
						})
					}
				})
			},
			eventObtainCode(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if(!reg.exec(this.updatePhone)){
					uni.showToast({
						title:'请输入正确格式的手机号',
						icon:'none',
						duration:2000
					})
				} else {
					this.packSetInterval()
					this.riderCode()
				}
			},
			// 获取验证码接口
			riderCode(){
				$api.postRiderCode({
					// token: uni.getStorageSync('token'),
					mobile: this.updatePhone,
				}).then(res => {
					this.codeKey = res.data.data.key
				})
			},
			packSetInterval() {
				this.isObtainCode = true
				let countdown = setInterval(() => {
					this.obtainCodes--;
					// this.obtainCode = `重新获取${this.obtainCode}S`
					if(this.obtainCodes <= 0) {
						clearInterval(countdown)
						this.obtainCode = 60
						this.isObtainCode = false
					}
				},1000)
			},
			// 手机号验证
			getphone(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.updatePhone)) {
				  this.regular.phone = 'checkmarkempty';
				} else {
				  this.regular.phone = 'closeempty';
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.personalData {
		.empty {
			height: 10rpx;
		}

		.main {
			background: white;

			.main-item {
				position: relative;
				width: 638rpx;
				height: 89rpx;
				margin: auto;
				border-bottom: 1px solid #E6E6E6;

				.main-item-left {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #2E2E2E;
					line-height: 30rpx;
				}

				.main-item-right {
					display: flex;
					align-items: center;

					.userImage {
						// width: 64rpx;
						// height: 64rpx;
						border-radius: 50%;
						margin-bottom: 30rpx;
					}

					.fillIn {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #818181;
						line-height: 30rpx;
					}

					// 右侧的箭头
					.main-item-right-forward {
						padding-left: 14rpx;
					}

					.uni-file-picker {
						// width: 64rpx;
						// height: 64rpx;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.main-item:first-child {
				height: 104rpx;
			}

			.main-item:last-child {
				height: 96rpx;
				border: none;
			}
		}
	}

	.popup {
		padding: 100rpx;
		.popup-item {
			position: relative;
			margin-top: 30rpx;
			// 手机号输入框
			.input-phone {
				width: 100%;
				border: 1px solid #e6e6e6;
				padding: 10rpx 20rpx;
				margin-right: 10rpx;
			}
			// 验证码输入框
			.input-code {
				width: 290rpx;
				border: 1px solid #e6e6e6;
				padding: 10rpx 20rpx;
			}
			// 获取验证码
			.obtainCodes {
				position: absolute;
				top: 15rpx;
				right: 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #F14500;
				background: #FFFFFF;
				line-height: 30rpx;
				z-index: 999;
			}
			.obtainCodes::after{
				border: none;
			}
			// 确认修改按钮
			.popup-item-button {
				// width: 630rpx;
				// height: 88rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: #F14500;
				border-radius: 44rpx;
				// margin: auto;
				margin-top: 50rpx;
			}
		}
	}
</style>